সিএসএস কাউন্টার

সিএসএস কাউন্টার(counter) হলো সিএসএস কর্তৃক নিয়ন্ত্রিত ভ্যারিয়েবল। কোনো এলিমেন্ট একটি পেজের মধ্যে কতবার ব্যবহৃত হয়েছে তার উপর ভিত্তিকরে সিএসএস নিয়মের আওতায় কাউন্টার ভ্যারিয়েবলের ভ্যালুসমূহ বৃদ্ধি পায়।

ডকুমেন্টের কন্টেন্টের উপর ভিত্তিকরে কাউন্টারসমূহকে মানানসই অবস্থানে রাখতে পারবেন।

এক নজরে সিএসএস কাউন্টার প্রোপার্টিসমূহ

content

জেনারেটেড কন্টেন্ট ইনসার্ট(insert) করার জন্য ::before এবং ::after সুডো-এলিমেন্টের সাথে ব্যবহার করা হয়।

counter-increment

কাউন্টারের ভ্যালু এক বা তার অধিক বৃদ্ধি পায়।

counter-reset

এক বা তার অধিক কাউন্টার তৈরি বা রিসেট হয়।

সিএসএস কাউন্টার নিয়ে কাজ করার জন্য, আমরা আবারো সিএসএস কাউন্টার প্রোপার্টি এবং ফাংশনের কার্যাবলী নিম্নে সংক্ষেপে তুলে ধরলাম।

1. counter-reset - একটি কাউন্টার তৈরি বা রিসেট করে।
2. counter-increment - কাউন্টারের ভ্যালু বৃদ্ধি করে।
3. content - সৃষ্টিকৃত কন্টেন্ট ইনসার্ট করে।
4. counter() অথবা counters() ফাংশন - একটি এলিমেন্টে কাউন্টারের ভ্যালু যুক্ত করে।

সিএসএস কাউন্টার ব্যবহার করতে হলে প্রথমে অবশ্যই counter-reset প্রোপার্টি দিয়ে ইহা তৈরি করে নিতে হবে।

নিচের উদাহরণে body সিলেক্টরের মাধ্যমে একটি পেজকে সিলেক্ট করে এর মধ্যে counter-reset প্রোপার্টি ব্যবহার করে section নামের একটি কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে।

তারপরে counter-increment প্রোপার্টি ব্যবহার করে প্রত্যেক < h1> এলিমেন্টের জন্য section এর ভ্যালু বৃদ্ধি করা হয়েছ।

content প্রপার্টির মাধ্যমে কাউন্টার(section) ভ্যারিয়েবলসহ এর বর্ধিত ভ্যালুকে প্র্যতেক < h1> এলিমেন্টের পূর্বে স্থান দেওয়া হয়েছে।

kt_satt_skill_example_id=981

নেস্টেড কাউন্টার

নিচের উদাহরণে body সিলেক্টরের মাধ্যমে পেজের জন্য section কাউন্টার ভ্যারিয়েবল তৈরি করে

সিলেক্টরের মাধ্যমে section এর মধ্যে subsection কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে।

kt_satt_skill_example_id=982

---

আউটলাইন লিস্ট তৈরির জন্য কাউন্টার যথাপোযুক্ত। কারণ কাউন্টারের নতুন ভ্যালু স্বয়ংক্রিয়ভাবে চাইল্ড এলিমেন্টসমূহে যুক্ত হয়।

নেস্টেড কাউন্টারের বিভিন্ন লেভেলের মধ্যে একটি স্ট্রিং যুক্ত করার জন্য counters() এর পরিবর্তে counters() ফাংশন ব্যবহার করা হয়।

kt_satt_skill_example_id=984

---